<template>
    <div class="chat-message">
        <div class="mes-wrap">
            <img :src="chat.from.avatar" class="avatar" alt="avatar" />
            <span v-if="!chat.isImg && !chat.isVoice">{{chat.inner}}</span>
            <span v-if="chat.isImg">
                <img class="chat-img" :src="chat.inner" />
            </span>
            <span v-if="chat.isVoice" class="chat-voice" @click="playVoice(chat.inner)">
                <spinner></spinner>
            </span>
        </div>
    </div>
</template>
<script>
import spinner from "./Spinner.vue";

export default {
    components: {
        spinner
    },
    props: {
        chat: Object,
        index: Number
    },
    mounted() {

    },
    data() {
        return {
            playing: false
        }
    },
    methods: {
        playVoice(src) {
            this.$emit("play", src, this.$el);
        }
    }

}
</script>
<style>
.bubble .mes-wrap {
	min-height: 50px;
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}

.bubble.own .mes-wrap {
	flex-direction: row-reverse;
}

.bubble .mes-wrap .avatar {
	width: 32px;
	border-radius: 3px;
}

.bubble .mes-wrap .chat-img {
	width: 95%;
	margin: 0 auto;
}

.bubble .mes-wrap span {
	max-width: 70%;
	word-break: break-all;
	margin-left: 15px;
	background-color: #972624;
	color: #fff;
	/* text-shadow: 2px 2px 25px #449ece; */
	min-height: 40px;
	font-size: 14px;
	display: flex;
	align-items: center;
	padding: 10px;
	align-self: baseline;
}

.bubble.own .mes-wrap span {
	background-color: #449ece;
	margin-left: 0;
	margin-right: 15px;
	/* text-shadow: 2px 2px 25px #972624; */
}

.bubble .mes-wrap .chat-voice {
	border-radius: 8px;
	cursor: pointer;
	width: 140px;
}

.mes-time {
	display: inline-block;
	width: 100%;
	text-align: center;
	color: #ccc;
	margin-bottom: 5px;
}
</style>

